{% set value = (value is null ? field.default : value) %}
{% if not codemirrorOptions %}
    {% set codemirrorOptions = {'mode': 'gfm', 'ignore': ['code', 'preview']}|merge(field.codemirror|default({})) %}
{% endif %}

{% block label %}
    {% if field.label %}
        {% set hint = field.help ? 'data-hint="' ~ field.help|tu|raw ~ '"': '' %}
        <div class="form-label form-field hint--bottom" {{ hint }}>{{ field.label|tu|raw }}</div>
    {% endif %}
{% endblock %}
{% block field %}
    <div class="form-field {{ field.classes|default('') }}">
        <div class="form-data grav-editor">
            <div class="grav-editor-content">
                <textarea
                    data-grav-editor="{{ {'codemirror': codemirrorOptions} | json_encode|e('html_attr') }}"
                    data-grav-editor-mode="editor"
                    name="{{ (scope ~ field.name)|fieldName }}"
                    {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
                    {% if field.id is defined %}id="{{ field.id|e }}" {% endif %}
                    {% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
                    {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
                    {% if field.placeholder %}placeholder="{{ field.placeholder|tu }}"{% endif %}
                    {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
                    {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
                    {% if field.readonly in ['on', 'true', 1] %}readonly="readonly"{% endif %}
                    {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
                    {% if 'preview' not in codemirrorOptions.ignore %}data-grav-urlpreview="{{ base_url }}/media/{{ admin.route|trim('/') }}.json"{% endif %}
                >{{ value|join("\n")|e('html') }}</textarea>
            </div>
            {% if field.resizer is not defined or field.resizer not in ['off', 'false', 0] %}<div class="grav-editor-resizer"></div>{% endif %}
        </div>
    </div>
{% endblock %}
